<!-- 活动说明页面 -->
<template>
  <div
    class="activity-info-page"
    :style="{ background: currentConfig.mainAreaBg }"
  >
    <div style="width: 100%; text-align: center; margin: 10px 0px">
      <span
        class="h2_caidai"
        :style="{ color: currentConfig.activeTitleColor }"
        style="margin: 0px 10px"
        >活动说明</span
      >
    </div>
    <div class="activity_content" v-html="activityInfo.prizeDesc"></div>

    <!-- 时间信息 -->
    <div class="time-info">
      <div class="time_item">
        <van-icon name="clock-o" style="margin-right: 5px" />开始时间：{{
          activityInfo.startTime
        }}
      </div>
      <div class="time_item">
        <van-icon name="underway-o" style="margin-right: 5px" />结束时间：{{
          activityInfo.endTime
        }}
      </div>
      <div class="time_item">
        <van-icon name="notes-o" style="margin-right: 5px" />一个投票者每天能投
        {{ everyDay.dailyVoteLimit }} 票
      </div>
    </div>
  </div>
</template>

<script>
import { styleConfig } from "@/utils/voteH5StyleConfigs.js";
import TabBar from "../components/TabBar.vue";
import { activeInfo } from "../api/index.js";
export default {
  components: {
    TabBar,
  },
  computed: {
    // 计算当前模板对应的样式配置
    currentConfig() {
      return styleConfig[this.templateId] || styleConfig[1];
    },
    // 可以单独定义需要的样式属性（如背景色）
    mainAreaBg() {
      return this.currentConfig.mainAreaBg;
    },
  },
  data() {
    return {
      activityId: "",
      templateId: 1,

      showSearchModal: false,

      activityInfo: {},

      everyDay: {}, // 一个投票者每天投多少票
      startTime: "",
      endTime: "",
    };
  },
  mounted() {
    // 1. 优先从 localStorage 获取数据（页面刷新后不丢失）
    this.activityId =
      localStorage.getItem("vote_activityId") || this.sharedData.activityId;
    this.templateId =
      Number(localStorage.getItem("vote_templateId")) ||
      this.sharedData.templateId;

    if (this.activityId) {
      this.fetchInitialData();
    } else {
      // 容错：提取失败时用默认ID，避免页面卡死
      this.activityId = "479c4a01a85440c693ac19ee55f6c68a";
      this.fetchInitialData();
    }
  },
  methods: {
    // 获取活动信息
    async fetchInitialData() {
      try {
        // 显示统一加载提示
        this.$toast.loading({
          message: "加载中...",
          forbidClick: true,
          duration: 0,
        });

        if (!this.activityId) {
          this.$toast.fail("未找到活动ID");
          return;
        }

        // 只请求活动详情接口，移除演员列表接口的并行请求
        const activityResponse = await activeInfo(this.activityId);

        // 处理活动详情响应
        console.log(
          "🚀 ~ fetchInitialData ~ activityResponse:",
          activityResponse
        );
        if (activityResponse.data && activityResponse.data.code === 0) {
          this.activityInfo = activityResponse.data.data;
          console.log(
            "🚀 ~ fetchInitialData ~ this.activityInfo:",
            this.activityInfo
          );
          this.everyDay = JSON.parse(this.activityInfo.voteSettings);
          console.log("🚀 ~ fetchInitialData ~ this.everyDay:", this.everyDay);
          this.startTime = activityResponse.data.data.startTime; //2025-09-02 00:00:00
          this.endTime = activityResponse.data.data.endTime; //2025-10-28 00:00:00
        } else {
          this.$toast.fail(activityResponse.data?.msg || "获取活动信息失败");
        }
      } catch (error) {
        console.error("初始数据加载失败:", error);
        this.$toast.fail("网络异常，数据加载失败");
      } finally {
        // 关闭加载提示
        this.$toast.clear();
      }
    },
    handleTabChange(index) {
      // 这里可根据index进行页面跳转等逻辑，比如用vue-router的this.$router.push
      console.log("切换到", index, "对应的页面");
    },
    handleSearch() {
      // 这里可编写搜索逻辑，比如调用接口等
      console.log("执行搜索操作");
      this.showSearchModal = false;
    },
  },
};
</script>

<style scoped>
/* 时间信息 */
.time-info {
  margin-top: 10px;
  text-align: left;
  background-color: #ffffffa3;
  padding: 8px 10px;

  .time_item {
    width: 100%;
    margin-bottom: 8px;
  }
}
.activity-info-page {
  /* 1. 占满视口高度（100vh = 屏幕全屏高度） */
  min-height: 100vh;
  /* 2. 确保 padding 不会撑开容器高度（padding 包含在 100vh 内） */
  box-sizing: border-box;
  /* 3. 原有 padding 保留，调整 bottom 适配底部 TabBar（避免内容被遮挡） */
  padding: 15px 10px 60px 10px; /* padding-bottom: 60px 适配底部 TabBar（通常 50px 高） */
  background-color: #eaeff3b0;
  /* 4. 若内容超出屏幕，允许内部滚动（可选，避免页面整体滚动） */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch; /* 优化移动端滚动体验 */
}
.activity_content {
  background-color: #ffffff90;
  padding: 20px 5px 10px 5px;
  margin-top: 20px;
}
.activity-section {
  margin-bottom: 15px;
}
.search-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}
.search-modal-content {
  background-color: white;
  padding: 20px;
  border-radius: 5px;
}
.search-modal-input {
  margin-bottom: 10px;
  padding: 6px;
  width: 200px;
}

.h2_caidai {
  background: url("../assets/caidai.png");
  width: 100px;
  font-size: 16px;
  font-weight: 500;
  height: 40px;
  padding: 15px 40px;
  background-size: 100% 100%;
  background-position: center; /* 可选，确保图片居中 */
}
::v-deep .ql-align-justify img {
  display: block;
  width: 100% !important;
  height: auto;
}
</style>
